<template>
  <div id="app" class="app-container">
    <!-- 主内容区 - 路由视图 -->
    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

<style>
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 确保html和body占满整个屏幕 */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 可选：防止页面整体滚动 */
}

#app {
  width: 100%;
  min-height: 100vh; /* 占满视口高度 */
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1; /* 填充剩余空间 */
  width: 100%;
  overflow: auto; /* 内容超出时可滚动 */
}
</style>
